<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<%layout("/WEB-INF/view/common/inc/admin_head.html",{title:'', styles:'bootstrap,font-awesome,animate,style,bootstrap-table,layui-date'}){}%>
</head>

<body>
<input type="hidden" name="productPriceId" id="productPriceId" value="${productPriceId}">
<div class="wrapper wrapper-content">
	<div class="row">
		<div class="col-sm-12">
			<div class="col-sm-offset-1 col-sm-10" style="margin-left: -10px;width: 100%;">
				<button type="button" class="return-btn btn btn-w-m btn-primary">返回</button>
				<div style="border-color: #e7eaec;border-image: none;border-style: solid solid none;border-width: 4px 0px;padding-bottom: 15px;margin-top: 10px;" ></div>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-sm-12">
		<div class="ibox-content">
			<div class="echarts" id="echarts-line-chart"></div>
		</div>
	</div>
</div>
<div class="wrapper wrapper-content">
	<div class="row">
		<div class="col-sm-12">
			<!-- START 数据表格 -->
			<table id="dealTable"
				   data-toolbar="#toolbar"
				   data-side-pagination="server"
				   data-pagination="true"
				   data-resizable="true"
				   data-url="/sea/supply/productPriceRecord/findByPriceId.do?productPriceId=${productPriceId}"
				   data-page-size="10">
			</table>
			<!-- END 数据表格 -->

			<!-- END 右侧数据 -->
		</div>
	</div>
</div>

<%layout("/WEB-INF/view/common/inc/admin_js.html",{modules:'jquery,bootstrap,bootstrap-table,bootstrap-table-zh-CN,layer,laydate,echarts'}){}%>
<script>
    var $dealTable = $('#dealTable'),selections=[];
    $(function(){
		historyTable();
        //START 表格配置
        $dealTable.bootstrapTable({
            height: getHeight(),
            columns: [
                {
                    title: '供应商',
                    field: 'productSupplierName',
                    align: 'left',
                    valign: 'middle'
                },
               {
					title: 'SKU',
					field: 'productSku',
					align: 'left',
					valign: 'middle'
				},{
					title: '价格',
					field: 'productPrice',
					align: 'left',
					valign: 'middle'
				},{
					title: '备注',
					field: 'productRemark',
					align: 'left',
					valign: 'middle'
				},{
					title: '更新时间',
					field: 'modifyTime',
					align: 'left',
					valign: 'middle'
				},{
					title: '操作人',
					field: 'productMember',
					align: 'left',
					valign: 'middle'
				}
            ],
            onLoadSuccess : function() {

            }
        });
        //END 表格配置

        //表格高度自适应
        $(window).resize(function () {
            $dealTable.bootstrapTable('resetView', {
                height: getHeight()
            });
        });
    });

    //表格高度计算
    function getHeight() {
        return $(window).height() - $('.btn-group').outerHeight(true) - $('.breadcrumb').outerHeight(true)-60;
    }

	//返回
	$('.return-btn').on('click',function(){
		parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭弹窗
	});

	function priceArr(data) {
		var priceArr = [];
		for(var i = 0 ;i < data.length;i++)
		{
			priceArr.push(data[i].productPrice);
		}
		return priceArr;
	}

	function dateArr(data) {
		var dateArr = [];
		for(var i = 0 ;i < data.length;i++)
		{
			dateArr.push(data[i].modifyTime.substr(0,10));
		}
		return dateArr;
	}

	function historyTable(){
		var id = $("#productPriceId").val();

		$.post('/sea/supply/productPriceRecord/getHistoryPrice.do?id='+id+'',function(data){
			$(".echarts").empty();//清空节点下的内容
			if(data.ok){
				console.log(data);
				var list =data.data;
				var dArr = dateArr(list);
				var pArr = priceArr(list);
				var html="";
				initManChart(dArr,pArr);
			}
			else {
				layer.msg(data.msg);
				return false;
			}
		});
	}
	function initManChart(dArr,pArr) {
		var myLineChart = echarts.init(document.getElementById('echarts-line-chart'));
		var  option = {
			title : {
				text: '价格变动',
				subtext: ''
			},
			tooltip : {
				trigger: 'axis'
			},
			legend: {
				data:['价格']
			},
			toolbox: {
				show : true,
				feature : {
					mark : {show: true},
					dataView : {show: true, readOnly: false},
					magicType : {show: true, type: ['line', 'bar']},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			calculable : true,
			xAxis : [
				{
					type : 'category',
					boundaryGap : false,
					data : dArr
				}
			],
			yAxis : [
				{
					type : 'value',
					axisLabel : {
						formatter: '{value} '
					}
				}
			],
			series : [
				{
					name:'价格',
					type:'line',
					data:pArr,
					markPoint : {
						data : [
							{type : 'max', name: '最大值'},
							{type : 'min', name: '最小值'}
						]
					},
					markLine : {
						// data : [
						//     {type : 'average', name: '平均值'}
						// ]
					}
				}
			]
		};
		myLineChart.setOption(option);
	}
</script>
</body>
</html>
